<template>
  <div class="content">
    <div class="header-container">
      <div class="header-item">
        <div class="avatar">
          <img :src="memberInfo.headImgUrl ? memberInfo.headImgUrl : 'https://img-cdn.rsm-lab.com/mlab/mlab-fitment/image/defaultAvatar.png'" alt="" />
        </div>
        <div class="info">
          <div class="name u-line-1">{{ memberInfo.nickname ? memberInfo.nickname : "登录" }}</div>
          <div class="phone">{{ memberInfo.mobile | encryptPhone }}</div>
        </div>
      </div>
    </div>
    <div class="content-list">
      <u-cell-item
        v-for="(item,index) in listItem"
        :key="index"
        title-width="140"
        :title="item.label"
        arrow="gengduo"
        class="cell-title"
        @click="seeAll(item)"
      >
        <template #icon>
          <u-icon
            :name="item.icon"
            size="40"
            custom-prefix="iconfont"
          />
        </template>
      </u-cell-item>
    </div>
    <FloatLayer custom-nav />
    <Login />
  </div>
</template>

<script lang="ts">
</script>

<style lang="scss">
.content {
      min-height: 100vh;
      .header-container{
        width: 375px;
        height: 201px;
        position: relative;
        background-image: url(https://img-cdn.rsm-lab.com/mlab/mlab-fitment/image/cover.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        .header-item{
          position: absolute;
          left: 0;
          bottom: 20%;
          display: flex;
          align-items: center;
          padding: 0 15px 0 20px;
          .avatar {
          width: 62px;
          min-width: 62px;
          height:62px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          flex: 1;
          overflow: hidden;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 18px;
          margin: 0 10px;
          .name {
            font-size: 18px;
            line-height: 22px;
            font-weight: bold;
          }
          .phone{
            font-size: 14px;
            margin-top: 5px;
          }
        }
        }

      }
      .content-list{
        background: #fefefe;
        padding: 0 20px;
        .time {
          line-height: 54px;
        }
        ::v-deep .u-cell {
          padding: 14px 0px !important;
          color: #111111;
        }
        ::v-deep .u-cell__value {
          text-align: right !important;
          color: #111111 !important;
          font-size: 14px;
        }
      }
      .cell-title{
        .u-cell_title{
          margin-left: 14px;
          font-size: 14px;
        }
      ::v-deep .u-icon--right {
          font-size: 12px !important;
        }
      }

}
.cell-title{
  ::v-deep .u-row{
    &::after{
    width: 335px !important;
    position: absolute!important;
    left: 50%!important;
    transform: translateX(-50%)!important;
    content: '' !important;
  }
  }
}
.u-border-bottom:after {
    border-bottom-color: #EEEEEE !important;
}
</style>
